<template>
    <div id="v_color">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
    </div>
</template>
<script>
import { Photoshop } from 'vue-color';
export default {
    name:'',
    component:{
    },
    data(){
        return {
            show: true
        }
    },
    methods:{
    }
    
}
</script>
<style>
#v_color{margin-top: 20px;width: 400px;}
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>